<!DOCTYPE html>
<html lang="en">
<#assign security=JspTaglibs["http://www.springframework.org/security/tags"] />
    <head>
        <meta charset="UTF-8">
        <title>角色管理</title>
        <link rel="stylesheet" href="css/layui.css" media="all">
        <link rel="stylesheet" href="css/doc.css" media="all">
        <link href="css/bootstrap.min.css" rel="stylesheet">
    </head>

    <body>
        <div class="kit-doc">
            <blockquote class="layui-elem-quote">角色管理</blockquote>
            <table class="layui-table">
                <colgroup>
                    <col width="5">
                    <col width="10">
                    <col width="180">
                    <col width="150">
                </colgroup>
                <thead>
                <tr>
                    <th>角色id</th>
                    <th>角色名</th>
                    <th>角色描述</th>
                    <th>角色操作</th>
                </tr>
                </thead>
                <tbody>
            <#list roles.records as role>
                <tr>
                    <td>${role.roleId}</td>
                    <td>${role.roleName}</td>
                    <td>${role.roleInfo}</td>
                    <td>
                        <@security.authorize access="hasRole('ADMIN')">
                            <button type="button" class="btn btn-primary" data-toggle="modal" data-target="#add">添加
                            </button>
                            <button type="button" class="btn btn-warning modifyRoleBtn" data-toggle="modal" data-target="#update">修改
                            </button>
                            <button class="btn btn-danger deleteRole">删除</button>
                        </@security.authorize>
                    </td>
                </tr>
            </#list>
                </tbody>
            </table>
        </div>
        <div id="demo" style="margin-left: 470px;"></div>
        <!-- 添加角色  -->
        <div class="modal fade" id="add" tabindex="-1" role="dialog">
            <div class="modal-dialog" role="document">
                <div class="modal-content">
                    <form method="post" action="/addRole">
                        <input type="hidden" name="pageNo" value="${roles.current}"><#--当前第几页-->
                        <div class="modal-header">
                            <button type="button" class="close" data-dismiss="modal"><span
                                        aria-hidden="true">&times;</span></button>
                            <h4 class="modal-title" id="exampleModalLabel">添加角色</h4>
                        </div>
                        <div class="modal-body">
                            <div class="form-group">
                                <label for="recipient-name" class="control-label">角色名:<span style="color: red; font-size: 15px" class="checkRoleName01" hidden>角色名只能包含字母或数字！</span></label>
                                <input type="text" placeholder="ADMIN" name="roleName" class="form-control checkRoleName02" id="recipient-name" required>
                            </div>
                            <div class="form-group">
                                <label for="recipient-pass" class="control-label">角色描述:</label>
                                <input type="text" name="roleInfo" class="form-control" id="recipient-pass"
                                       required>
                            </div>
                            <div class="form-group">
                                <label for="recipient-pass" class="control-label">选择权限:</label><br/>
                                <table class="table">
                                    <tr>
                                        <td>
                                        <label class="checkbox-inline">
                                            <span style="color:red">全选&emsp;&emsp;</span><input type="checkbox" id="inlineCheckbox1 checkall1">
                                        </label>
                                        </td>
                                    </tr>
                                    <#list menus as menu>
                                        <tr>
                                            <td>
                                                <label class="checkbox-inline">
                                                    <span style="color: #2e6da4">${menu.menuName}&emsp;&emsp;</span>
                                                    <input type="checkbox" id="inlineCheckbox1" name="menuId" class="checkallch1" value="${menu.menuId}" onclick="ccc1()">
                                                </label>
                                            </td>
                                        </tr>
                                    </#list>
                                </table>
                            </div>
                        </div>
                        <div class="modal-footer">
                            <button type="button" class="btn btn-default" data-dismiss="modal">取消</button>
                            <input type="submit" class="btn btn-primary checkRoleNameBtn01" value="添加" disabled/>
                        </div>
                </div>
            </div>
            </form>
        </div>
        <!-- 修改角色  -->
        <div class="modal fade" id="update" tabindex="-1" role="dialog">
            <div class="modal-dialog" role="document">
                <div class="modal-content">
                    <form method="post" action="/modifyRole">
                        <input type="hidden" name="roleId" value="" class="ModifyRoleById"/><#--发给服务器的roleId-->
                        <input type="hidden" name="pageNo" value="${roles.current}"><#--分页数据-->
                        <div class="modal-header">
                            <button type="button" class="close" data-dismiss="modal"><span
                                        aria-hidden="true">&times;</span></button>
                            <h4 class="modal-title" id="exampleModalLabel">修改角色</h4>
                        </div>
                        <div class="modal-body">
                            <div class="form-group">
                                <label for="recipient-name" class="control-label">角色名:<span style="color: red; font-size: 15px" class="checkRoleName03" hidden>角色名只能包含字母或数字！</span></label>
                                <input type="text" name="roleName" class="form-control modifyRoleName checkRoleName04" id="recipient-name" required>
                            </div>
                            <div class="form-group">
                                <label for="recipient-pass" class="control-label">角色描述:</label>
                                <input type="text" name="roleInfo" class="form-control modifyRoleInfo" id="recipient-pass"
                                       required>
                            </div>
                        </div>
                        <div class="form-group">
                            <label for="recipient-pass" class="control-label">&nbsp;选择权限:</label><br/>
                            <table class="table">
                                <tr>
                                    <td>
                                        <label class="checkbox-inline">
                                            <span style="color:red">全选&emsp;&emsp;</span><input type="checkbox" id="inlineCheckbox1 checkall2">
                                        </label>
                                    </td>
                                </tr>
                                <#list menus as menu>
                                    <tr>
                                        <td>
                                            <label class="checkbox-inline">
                                                <span style="color: #2e6da4">${menu.menuName}&emsp;&emsp;</span>
                                                <input type="checkbox" id="inlineCheckbox1" name="menuId" class="checkallch2" value="${menu.menuId}" onclick="ccc2()">
                                            </label>
                                        </td>
                                    </tr>
                                </#list>
                            </table>
                        </div>
                        <div class="modal-footer">
                            <button type="button" class="btn btn-default" data-dismiss="modal">取消</button>
                            <input type="submit" class="btn btn-primary checkRoleNameBtn02" value="修改"/>
                        </div>
                </div>
            </div>
            </form>
        </div>
        <script src="js/jquery-3.5.1.js"></script>
        <script src="js/bootstrap.min.js"></script>
        <script src="js/layui.all.js"></script>
        <script type = "text/javascript">
            /**
             * 添加-正则校验roleName
             */
            $('.checkRoleName02').blur(function() {
                let cc01 = /^[A-Za-z0-9]+$/;
                if(cc01.test($('.checkRoleName02').val())) {
                    $('.checkRoleName01').hide();
                    $('.checkRoleNameBtn01').attr('disabled', false);
                } else {
                    $('.checkRoleName01').show();
                    $('.checkRoleNameBtn01').attr('disabled', true);
                }
            });
            /**
             * 修改-正则校验roleName
             */
            $('.checkRoleName04').blur(function() {
                let cc01 = /^[A-Za-z0-9]+$/;
                if(cc01.test($('.checkRoleName04').val())) {
                    $('.checkRoleName03').hide();
                    $('.checkRoleNameBtn02').attr('disabled', false);
                } else {
                    $('.checkRoleName03').show();
                    $('.checkRoleNameBtn02').attr('disabled', true);
                }
            });

            /**
             *添加-全选role
             */
            //全选a&&取消全选
            var all = document.getElementById("inlineCheckbox1 checkall1");
            var allS = document.getElementsByClassName("checkallch1");
            all.onclick = function(){
                for(let i = 0; i < allS.length; i++){
                    allS[i].checked = all.checked;
                }
            }
            //有一个没选,把全选取消
            function ccc1(){
                let flag = true;
                for(let i = 0; i < allS.length; i++){
                    if(allS[i].checked == false){
                        flag = false;
                        break;
                    }
                }
                all.checked = flag;
            }
            /**
             *修改-全选role
             */
            //全选a&&取消全选
            var all2 = document.getElementById("inlineCheckbox1 checkall2");
            var allS2 = document.getElementsByClassName("checkallch2");
            all2.onclick = function(){
                for(let i = 0; i < allS2.length; i++){
                    allS2[i].checked = all2.checked;
                }
            }
            //有一个没选,把全选取消
            function ccc2(){
                let flag = true;
                for(let i = 0; i < allS2.length; i++){
                    if(allS2[i].checked == false){
                        flag = false;
                        break;
                    }
                }
                all2.checked = flag;
            }

            /**
             * 修改role时menu选项的回显
             */
            $('.modifyRoleBtn').click(function() {
                let roleInput = $('.checkallch2');// menu复选框
                let roleId = $(this).parents('tr').find('td').eq(0).text();// 获取roleId
                let roleName = $(this).parents('tr').find('td').eq(1).text();// 获取roleName
                let roleInfo = $(this).parents('tr').find('td').eq(2).text();// 获取roleInfo
                //在修改模态框中显示旧的信息
                $('.modifyRoleName').val(roleName.substring(5));
                $('.modifyRoleInfo').val(roleInfo);
                // 获取当前角色的roleId发给服务器
                $('.ModifyRoleById').val(roleId);
                $.ajax({
                    url: URL() + "modifyRoleEcho?",
                    type: "POST",
                    data: "roleId=" + roleId,
                    success: function(data) {
                        // 清除之前旧的checkbox设置
                        for (let i=0; i<roleInput.length; i++) {
                            roleInput.get(i).checked = false;
                        }
                        //根据角色设置对应的菜单回显
                        for (let i=0; i<roleInput.length; i++) {
                            $.each(data, function(k,item) {
                                if (roleInput.get(i).getAttribute('value') == item) {
                                    roleInput.get(i).checked = true;
                                }
                            });
                        }
                    }
                });
            });

            /**
             * 删除role
             * @returns
             * @constructor
             */
            $('.deleteRole').click(function() {
                let roleId = $(this).parents("tr").find("td").eq(0).text();//获取role_id
                let roleInfo = $(this).parents("tr").find("td").eq(1).text();//获取role_info
                if (window.confirm("确认删除角色 " + roleInfo + " 吗?")) {
                    $.ajax({
                        url: URL() + "deleteRoleMenu?",
                        type: "DELETE",
                        data: "roleId=" + roleId + "&pageNo=" + ${roles.current},
                        success: function() {
                            window.location.href = URL() + "roleManage?pageNo=" + ${roles.current};
                        }
                    });
                }
            });

            /**
             * 分页
             */
            layui.use(['laypage', 'layer'], function(){
                var laypage = layui.laypage
                    ,layer = layui.layer;
                laypage.render({
                    elem: 'demo'
                    , theme: '#009688'
                    , curr: ${roles.current}// 当前第几页
                    , count: ${roles.total}// 总条数
                    , limit: ${roles.size}// 每页显示的条数
                    , jump: function(obj, first) {//obj.curr,当前第几页
                        if (!first) {
                            window.location.href = URL() + "roleManage?pageNo=" + obj.curr;
                        }
                    }
                });
            });

            //获取项目路径
            function URL() {
                return window.location.protocol + "//" + window.location.host + "/";
            }
        </script>
    </body>
</html>